<template>
    <div>
        <Header :title="t('Self')" />
        <main>
            <header>
                <div class="item name">
                    {{ t('home.Market.name') }}
                </div>
                <div class="item auto">
                    {{ t('home.Market.price') }}
                </div>
                <div class="item price">
                    {{ t('home.Market.increase') }}
                </div>
            </header>
            <div class="goods" v-for="ele in optionalList" :key="ele.id" @click="getDetail(ele)">
                <div class="item name">
                    {{ ele.pairsName }}
                </div>
                <div class="item auto">
                    {{ ele.priceVo.close.toFixed(5) }}
                </div>
                <div :class="['item', 'price', ele.priceVo.rate > 0 ? 'red' : 'green']">
                    {{ `${(ele.priceVo.rate * 100).toFixed(2)}%` }}
                </div>
            </div>
        </main>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user';
import { $animationInterVal } from '@/hooks/requestAnimationFrame'
import { userApi } from '@/api'
import { reactive, onMounted, onBeforeUnmount, ref } from 'vue'

const { t } = useLanguage()
const router = useRouter()
const userStore = UserStore()
const { cateId } = storeToRefs(userStore)

const postData = reactive({
    pageNum: 1,
    pageSize: 10
})
const optionalList = ref([])
async function getOptionalList() {
    const { code, data } = await userApi.getOptionalList(postData)
    if (code == 20000) {
        optionalList.value = data.records
    }
}

// 去行情细节
function getDetail(params) {
    const { pairsName, id } = params
    cateId.value = params.cateId
    router.push({
        path: '/detail',
        query: {
            pairsName,
            id,
        }
    })
}


let timer = null
onMounted(() => {
    timer = $animationInterVal(() => {
        getOptionalList()
    }, 5000, true)
})
onBeforeUnmount(() => {
    timer()
})

</script>

<style lang="less" scoped>
main {
    padding: 5px 10px;

    header {
        height: 40px;
        border-top: 1px solid #E5E5E5;
        border-bottom: 1px solid #E5E5E5;
        display: flex;
        font-size: 16px;
        align-items: center;
        padding: 0px 0px 0px 15px;

        .auto {
            margin-left: auto;
            margin-right: 50px;
        }

        .price {
            margin-right: 40px;
        }
    }

    .goods {
        height: 60px;
        border-bottom: 1px solid #E5E5E5;
        display: flex;
        font-size: 16px;
        align-items: center;
        padding: 0px 0px 0px 10px;

        .item {
            font-size: 12px;
        }

        .name {
            font-weight: 600;
        }

        .auto {
            margin-left: auto;
            margin-right: 50px;
        }

        .price {
            margin-right: 15px;
            padding: 10px 20px;
            border-radius: 4px;
            color: #E5E5E5;
        }

        .green {
            background-color: #4CAF50;
        }

        .red {
            background-color: #F44336;
        }
    }
}
</style>